import React, { PureComponent, Suspense } from 'react';
import { connect } from 'dva';
import { Layout, Dropdown, Menu } from 'antd';
import { CaretDownOutlined } from '@ant-design/icons';
import classNames from 'classnames';
// import Link from 'umi/link';
import styles from './index.less';
import PageLoading from '../PageLoading';
import { getDefaultCollapsedSubMenus } from './SiderMenuUtils';

const BaseMenu = React.lazy(() => import('./BaseMenu'));
const { Sider } = Layout;

@connect(({ login }) => ({
  login,
}))
class SiderMenu extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      openKeys: getDefaultCollapsedSubMenus(props),
    };
  }

  static getDerivedStateFromProps(props, state) {
    const { pathname } = state;
    if (props.location.pathname !== pathname) {
      return {
        pathname: props.location.pathname,
        openKeys: getDefaultCollapsedSubMenus(props),
      };
    }
    return null;
  }

  isMainMenu = key => {
    const { menuData } = this.props;
    return menuData.some(item => {
      if (key) {
        return item.key === key || item.path === key;
      }
      return false;
    });
  };

  handleOpenChange = openKeys => {
    const moreThanOne = openKeys.filter(openKey => this.isMainMenu(openKey)).length > 1;
    this.setState({
      openKeys: moreThanOne ? [openKeys.pop()] : [...openKeys],
    });
  };

  /**
   * 下拉菜单显示
   * @param {boolean} visible
   */
  handleVisibleChange = visible => {
    this.setState({
      visible,
    });
  };

  /**
   * 系统切换事件
   * @param {*} param0
   */
  handleSystemChange = ({ key }) => {
    const {
      dispatch,
      route: { routes, authority },
    } = this.props;
    dispatch({
      type: 'login/systemChange',
      payload: { sysId: key, routes, authority },
    });
  };

  /**
   * 获取系统列表
   */
  getSystemMenuList = () => {
    const {
      login: { systemList, currentSystem },
    } = this.props;
    const selectedKeys = [currentSystem?.sysId];
    if (systemList.length > 1) {
      return (
        <Menu
          selectedKeys={selectedKeys}
          theme="light"
          className={styles.dropMenu}
          onClick={this.handleSystemChange}
        >
          {systemList.map(system => (
            <Menu.Item key={system.sysId}>
              <a className={styles.dropText}>{system.sysName}</a>
            </Menu.Item>
          ))}
        </Menu>
      );
    }
    return null;
  };

  /**
   * 渲染系统列表
   */
  renderSystemMenuList = () => {
    const {
      login: { currentSystem },
      sysName,
    } = this.props;
    const { visible } = this.state;
    const SystemMenu = this.getSystemMenuList();
    const dropMenuClassNames = classNames(styles.dropIcon, { [styles.visible]: visible });
    if (SystemMenu) {
      return (
        <Dropdown
          overlay={SystemMenu}
          onClick={e => e.preventDefault()}
          onVisibleChange={this.handleVisibleChange}
        >
          <h1 className={styles.dropHeader}>
            {currentSystem?.sysName} <CaretDownOutlined className={dropMenuClassNames} />
          </h1>
        </Dropdown>
      );
    }
    return <h1>{sysName}</h1>;
  };

  render() {
    const { logo, collapsed, onCollapse, fixSiderbar, theme } = this.props;
    const { openKeys } = this.state;
    const defaultProps = collapsed ? {} : { openKeys };

    const siderClassName = classNames(styles.sider, {
      [styles.fixSiderbar]: fixSiderbar,
      [styles.light]: theme === 'light',
    });
    return (
      <Sider
        trigger={null}
        collapsible
        collapsed={collapsed}
        breakpoint="lg"
        onCollapse={onCollapse}
        width={256}
        theme={theme}
        className={siderClassName}
      >
        <div className={styles.logo} id="logo">
          {/* <Link to="/"> */}
          <img src={logo} alt="logo" />
          {this.renderSystemMenuList()}
          {/* <h1>{sysName}</h1> */}
          {/* </Link> */}
        </div>
        <Suspense fallback={<PageLoading />}>
          <BaseMenu
            {...this.props}
            mode="inline"
            handleOpenChange={this.handleOpenChange}
            onOpenChange={this.handleOpenChange}
            style={{ padding: '16px 0', width: '100%' }}
            {...defaultProps}
          />
        </Suspense>
      </Sider>
    );
  }
}

export default SiderMenu;
